<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>淘票票</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/index.css">
  <script src="js/axios.min.js"></script>
  <style>
    .btn{
      color: #fff;
      width: 600px;
      margin: 0 auto;
    }

    #box {
      height: 400px;
      background-color: black;
    }
    #box img{
      margin-left: 200px;
    }
    .but {
      color: red;
      margin-left: 200px;
    }
  </style>
</head>

<body>
  <header>
    <div class="top">
      <ul class="top-left">
        <li><a href="login.html">亲，请登录</a></li>
        <li><a href="reg.html">免费注册</a></li>
        <li><a href="#">手机逛淘宝</a></li>
      </ul>
      <ul class="top-right">
        <li><a href="https://www.taobao.com/">淘宝网首页</a></li>
        <li class="dropdown">
          <a href="#">我的淘宝</a>
          <ul class="dropdown__content">
            <li><a href="#">已买到的宝贝</a></li>
            <li><a href="#">我的足迹</a></li>
          </ul>
        </li>
        <li><a href="cart.html">购物车</a></li>
        <li class="dropdown">
          <a href="#">收藏夹</a>
          <ul class="dropdown__content">
            <li><a href="#">收藏的宝贝</a></li>
            <li><a href="#">收藏的店铺</a></li>
          </ul>
        </li>
        <li><a href="#">商品分类</a></li>
        <li><a href="#">免费开店</a></li>
        <li class="dropdown">
          <a href="#">千牛卖家中心</a>
          <ul class="dropdown__content">
            <li><a href="#">免费开店</a></li>
            <li><a href="#">已卖出的宝贝</a></li>
            <li><a href="#">出售中的宝贝</a></li>
            <li><a href="#">卖家服务市场</a></li>
            <li><a href="#">卖家培训中心</a></li>
            <li><a href="#">体检中心</a></li>
            <li><a href="#">问商友</a></li>
          </ul>
        </li>
        <li><a href="#">联系客户</a></li>
        <li><a href="#">网站导航</a></li>
      </ul>
    </div>
  </header>
  <nav>
    <div>
      <img src="img/01.png" alt="">
      <ul>
        <li> <a href="#">郑州</a></li>
        <li><a href="index.html" style="color: #6b6b6b;">首页</a></li>
        <li style="color: red;">影片</li>
        <li>影院</li>
      </ul>
      <p>
        <a href="#">手机购买</a>
        <a href="#">客服咨询</a>
      </p>
    </div>
  </nav>
  <div id="box">
    <!-- <h1></h1>
      <p></p>
      <img src="" alt="" />
      <p></p>
      <button onclick="addCart()">加入购物车</button> -->
  </div>
  <div class="footer" style="margin-top:0px">
    <div class="footWrap">
      <div class="footMiddle" style="height: 150px;">
        <div class="footLogo">
          <a href="#"><img src="img/TB.png" /></a>
          <span>如果您是消费者，</span>
          <span>请拨打0571-88157838</span>
          <span>如果您是影院/合作商家，</span>
          <span>请拨打400-825-9220</span>
          <span>(服务时间:9:00-21:00)</span>
        </div>
        <dl>
          <dt>选座购票流程</dt>
          <dd><a href="#" target="_blank" title="选择影片和场次">选择影片和场次</a></dd>
          <dd><a href="#" target="_blank" title="选择中意的座位">选择中意的座位</a></dd>
          <dd><a href="#" target="_blank" title="支付并收到取票短信">支付并收到取票短信</a></dd>
        </dl>
        <dl>
          <dt>取票流程</dt>
          <dd><a href="#" target="_blank" title="收到取票短信">收到取票短信</a></dd>
          <dd><a href="#" target="_blank" title="影院自助取票">影院自助取票</a></dd>
          <dd><a href="#" target="_blank" title="短信重发方式">短信重发方式</a></dd>
        </dl>
        <dl>
          <dt>常见问题</dt>
          <dd><a href="#" target="_blank" title="是否支持退换票">是否支持退换票</a></dd>
          <dd><a href="#" target="_blank" title="填错手机号怎么办">填错手机号怎么办</a></dd>
          <dd><a href="#" target="_blank" title="更多问题>>">更多问题>></a></dd>
        </dl>
        <dl>
          <dt>协议规范</dt>
          <dd><a href="#" target="_blank" title="用户服务协议">用户服务协议</a></dd>
          <dd><a href="#" target="_blank" title="食品管理规范">食品管理规范</a></dd>
          <dd><a href="#" target="_blank" title="隐私权政策">隐私权政策</a></dd>
          <dd><a href="#" target="_blank" title="退改签服务费规范">退改签服务费规范</a></dd>
        </dl>
        <div class="order-code" style="background-image:url(./img/xiaz.png); width:200px;">
        </div>
      </div>
      <div class="footBottom" style="height: 140px">
        <img class="img" src="img/T1.png">
        <div class="footer-ali">
          <a href="#" data-spm-anchor-id="1.1000386.245549.1">阿里巴巴集团</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.2">阿里巴巴国际站</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.3">阿里巴巴中国站</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.4">全球速卖通</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.5">淘宝网</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.6">天猫</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.7">聚划算</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.8">一淘</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.9">阿里妈妈</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.10">阿里云计算</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.11">云OS</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.12">万网</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.13">中国雅虎</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.14">支付宝</a>
        </div>
        <div class="foot-nav">
          <a href="#" data-spm-anchor-id="1.1000386.245549.15">关于淘宝</a>
          <a href="#" data-spm-anchor-id="1.1000386.245549.16">合作伙伴</a>
          <a href="#" data-spm-anchor-id="1.1000386.245549.17">营销中心</a>
          <a href="#" data-spm-anchor-id="1.1000386.245549.18">联系客服</a>
          <a href="#" data-spm-anchor-id="1.1000386.245549.19">开放平台</a>
          <a href="#" data-spm-anchor-id="1.1000386.245549.20">诚征英才</a>
          <a href="#" data-spm-anchor-id="1.1000386.245549.21">联系我们</a>
          <a href="#" data-spm-anchor-id="1.1000386.245549.22">网站地图</a>
          <a href="#" data-spm-anchor-id="1.1000386.245549.23">法律声明</a>
          <span>&copy; 2017 Taopiaopiao.com 版权所有</span><br>增值电信业务经营许可证：沪B2-20170117 <a href="#"
            target="_blank">沪ICP备16050036号-1</a> <a href="#" target="_blank" title="营业执照"> 营业执照</a>
          <br><span>违法不良信息举报电话 0571-88157838</span>
          <br><span>违法不良信息举报邮箱 taopiaopiao_tousu@list.alibaba-inc.com</span>
        </div>

      </div>
    </div>
  </div>
  <script>
    //   把搜索字符串 ？id=22&a=2&b=2 转为对象
    let searchObj = new URLSearchParams(location.search);
    // console.log(searchObj);
    //获取 id 的值
    let pid = searchObj.get("id");
    // console.log(pid);
    let detailProductAPI = "http://jx.xuzhixiang.top/ap/api/detail.php";
    axios.get(detailProductAPI, {
      params: {
        id: pid
      }
    }).then((r) => {
      //r.data 服务器返回的数据
      let pObj = r.data.data;
      // console.log(pObj);
      if (pObj) {
        // Cannot read properties of null (reading 'pname')
        let str = `<h3>${pObj.pname}</h3>
                    <p class="but">${pObj.pprice}￥</p>
                    <img src="${pObj.pimg}" alt="" />
                    <p class="btn">${pObj.pdesc}</p>
                   
                    
                    `;

        let box = document.querySelector("#box");
        box.innerHTML = str;
      } else {
        alert("商品不存在");
      }
    });

    async function addCart() {
      // 获取参数
      let uid = localStorage.getItem("id");
      pid;
      let ipt = document.querySelector("#ipt");
      let pnum = ipt.value;
      let params = {
        uid,
        pid,
        pnum
      };

      // console.log(params);
      let addCartAPI = "http://jx.xuzhixiang.top/ap/api/add-product.php";
      let res = await axios.get(addCartAPI, {
        params
      });
      // console.log(res.data);
      alert("加入购物车成功");
    }

    function toMyCart() {
      // 获取参数
      let uid = localStorage.getItem("id");
      if (uid) {
        location.href = "cart.html";
      } else {
        location.href = "login.html";
      }
    }
  </script>
</body>

</html>